<template>
  <div class="bot_store_temp">
    <div class="searc_box">
      <el-input
        :placeholder="$t('custom.attendance.record.search.search')"
        prefix-icon="el-icon-search"
        @input="searchList"
        v-model="serachVal">
      </el-input>
    </div>
    <div class="card-list scroll-css">
      <div v-for="(item, index) in currTemplateStoreList"
          :key="index"
          @click="selectScriptOrTemplate(item, 'Store')"
          :class="{'card-border':item.id===stateObj['id']}"
          class="card-list-item">
        <div class="image">
          <el-image style="width: 100%;height: 100%;"
                    :src="item.icon?item.icon:$ossLink+'/app/bot/bot-icon-normal.png'"></el-image>
        </div>
        <div>
          <div v-if="comWidthIsOverflow(item.name, 'name')"
              class="name">{{ item.name }}</div>
          <el-tooltip :open-delay="1000" v-else
                      effect="dark"
                      :content="item.name"
                      placement="bottom-start">
            <div class="name">
              {{ item.name }}
            </div>
          </el-tooltip>
          <div v-if="comWidthIsOverflow(item.description, 'description')"
              class="description">{{ item.description }}</div>
          <el-tooltip :open-delay="1000" v-else
                      effect="dark"
                      :content="item.description"
                      placement="bottom-start">
            <div class="description">
              {{ item.description }}
            </div>
          </el-tooltip>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    templateStoreList: {
      type: Array,
      default: () => {
        return []
      }
    },
    stateObj: {}
  },
  data () {
    return {
      serachVal: '',
      currTemplateStoreList: []
    }
  },
  watch: {
    templateStoreList: {
      handler (val) {
        this.currTemplateStoreList = val
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    comWidthIsOverflow (str, type) {
      if (!str) {
        return true
      }
      if (type === 'name') {
        if (str.length <= 15) {
          return true
        } else {
          return false
        }
      }
      if (type === 'description') {
        if (str.length <= 50) {
          return true
        } else {
          return false
        }
      }
      return false
    },
    selectScriptOrTemplate (item, type) {
      let params = {
        item: item,
        type: type
      }
      this.$emit('createbotTem', params)
    },
    searchList () {
      this.currTemplateStoreList = this.templateStoreList.filter(e => e.name.toLowerCase().indexOf(this.serachVal.toLowerCase()) !== -1)
    }
  }
}
</script>
<style lang="scss">
.bot_store_temp{
  .searc_box{
    padding: 0 10px ;
  }
  .card-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    padding: 20px;
    margin-bottom: 30px;
    height: 500px;
    &-item {
      width: 270px;
      height: 160px;
      background: #FFFFFF;
      box-shadow: 0px 0px 8px 0px #F0F0F0;
      border-radius: 4px;
      padding: 10px;
      margin-bottom: 20px;

      &:hover {
        box-shadow: 0px 0px 8px 0px #dddddd;
      }

      .image {
        width: 40px;
        height: 40px;
      }

      .name {
        width: 100%;
        height: 20px;
        font-weight: bold;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-top: 10px;
      }

      .description {
        width: 100%;
        height: 60px;
        line-height: 20px;
        word-break: break-word;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
      }
    }
  }
}

</style>
